@use "../core/color";
@use "../core/layout";
@use "../core/typography";

.tabs__link {
  color: inherit;
}

.tabs__item {
  display: inline;
  color: color.$grey-4;
  font-size: typography.$title-font-size;

  &:not(:last-of-type)::after {
    content: " | ";
  }

  .is-active {
    color: color.$grey-6;
  }
}

.tabs {
  margin-top: 55px;
  padding-bottom: 30px;
}

@media screen and (max-width: layout.$max-phone-width) {
  .tabs__item {
    font-size: typography.$input-font-size;
  }
}
